<template>
    <main>
        <div class="Vie-Price-Header">
            <div class="Price">
                <div>
                    <span>￥<span class="price">{{vie.listprice}}</span>.00
                   </span>
                </div>
                <div class="icon">
                    <span class="Price-icon">
                   <span class="coll">降价提醒</span><span class="collect">收藏</span> 
                </span>
                </div>
            </div>
        </div>
        <div class="Vie-Price-Content">
            <i class="Vie-icon"><img :src="vie.listicon" alt=""></i>
            {{vie.listtext}}
        </div>
        <div class="Vie-Price-bottom">
            {{vie.listtitle}}<a href="javascript:0;">查看></a>
        </div>
        
    </main>
</template>
<script>
export default {
    name:'DetailsVie',
    props:['vie']
    
}
</script>
<style scoped lang="less">
main{
    background: #fff;
    border-bottom-left-radius: .75rem;
    border-bottom-right-radius: .75rem;
}
 .Vie-Price-Header{
     width: 23.4375rem;
     .Price{
         font-size: 1.125rem;
         text-align: left;
         color: #f2270c;
         padding:.625rem 1rem;
         display: flex;
         justify-content: space-between;
         .icon{
             padding-top:1.25rem ;
         }
         .price{
             font-size: 1.875rem;
            font-weight: bold;
            
         }
         .Price-icon{
             color: #262626;
             font-size: .5625rem;
             span{
                 position: relative;
                 padding: 0rem .625rem;
                 padding-top: 1.25rem;
             }
             .coll:after{
                    content: "";
                    position: absolute;
                    top: 0;
                    width: 1.125rem;
                    height: 1.125rem;
                    left: 50%;
                    -webkit-transform: translate(-50%);
                    transform: translate(-50%);
                    background: url(/src/assets/images/coll.png) no-repeat;
                    background-size: 100%;
                    border: none;
             }
             .collect::after{
                content: "";
                    position: absolute;
                    top: 0;
                    width: 1.125rem;
                    height: 1.125rem;
                    left: 50%;
                    -webkit-transform: translate(-50%);
                    transform: translate(-50%);
                    background: url(/src/assets/images/collect.png) no-repeat;
                    background-size: 100%;
                    border: none;
             }
         }
     }
 }
 .Vie-Price-Content{
     width: 21.1875rem;
     height: 3.9375rem;
     padding: 0rem .9375rem;
     text-align: left;
     font-weight: 700;
     .Vie-icon{
         width: 1.5rem;
         height: .8125rem;
         img{
             width: 1.5rem;
             height: .8125rem;
         }
     }
 }
 .Vie-Price-bottom{
     padding: 0rem .9375rem;
     padding-bottom: .3125rem;
     font-size:.5625rem;
     padding-top: .9375rem;
     text-align: left;
     a{
         color: #e4393c;
     }
 }
</style>